<template>
  <div :id="charId" class="mycharts"></div>
</template>
<script>
// 点击事件 pieClick
export default {
  props: {
    charId: {
      type: String,
      default: ""
    },
    tooltipDw: {
      type: String,
      default: "条"
    },
    pieOptions: {
      type: Object,
      default: () => {}
    },
    colorList: {
      type: Array,
      default: () => ["#f09658", "#4a95e6", "#43d2fe", "#4abc81", "#a1ff8f", "#E1C48B", "#6197E8", "#8BC2E1", "#6FF093"
      ]
    },
    optionData: {
      type: Array,
      default: () => [
        ["香蕉", 80], ["猕猴桃", 30], ["桃子", 10], ["橘子", 60]
      ]
    },
    dataLabelsShow: {
      type: Boolean,
      default: false
    },
    totalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      pieColors: [],
      innerSize: 200, // 内环大小
      pieSize: "100%",
      subtitleY: 180,
      depth: 80, // 环形图高度
      seriesData: []
    };
  },
  created() {
    if (this.pieOptions) {
      if (this.pieOptions.innerSize) this.innerSize = this.pieOptions.innerSize;
      if (this.pieOptions.depth) this.depth = this.pieOptions.depth;
      if (this.pieOptions.subtitleY) this.subtitleY = this.pieOptions.subtitleY;
      if (this.pieOptions.pieSize) this.pieSize = this.pieOptions.pieSize;
    }

    let num = 0;
    this.optionData.forEach(el => {
      num += el[1];
    });
    const jg = Number(num * (1 / 20).toFixed(2));
    // if (num >= 30) {
    //   jg = Math.ceil(num * (1 / 20));
    // } else {
    //   jg = Number(num * (1 / 20).toFixed(2));
    // }
    if (this.optionData.length > 1) {
      this.optionData.forEach((el, index) => {
        this.seriesData.push(el, ["00", jg]);
        this.pieColors.push(this.colorList[index], "rgba(0, 0, 0, 0)");
      });
    } else if (this.optionData.length === 1) {
      this.seriesData = this.optionData;
      this.pieColors = this.colorList[0];
    }
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const that = this;
      this.$Highcharts.chart(this.charId, {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 66
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.3)",
          borderWidth: 0,
          padding: 0,
          useHTML: true,
          shadow: false,
          // shared: true,
          formatter() {
            if (this.point.name === "00") return "";
            return `
            <div style="padding: 6px;font-size:20px;color:#fff;">
              <span style="font-size:26px;color:${this.point.color}">●</span>
              <span>${this.point.name}:</span>
              <span>${this.point.y}${that.tooltipDw}</span>
            </div>`;
          }
        },
        // title: {
        //   text: '简数科技每周水果消耗量'
        // },
        subtitle: {
          floating: true,
          text: `<span style="font-size: 24px;font-weight:bold;color:#fff">${this.totalData.num || ""}</span><br/><span style="font-size: 24px;color:#fff">${this.totalData.text || ""}</span>`,
          x: 0,
          y: this.subtitleY
        },
        plotOptions: {
          pie: {
            innerSize: this.innerSize,
            depth: this.depth,
            events: {
              click: function (event) {
                if (event.point.name === "00") return;
                that.$emit("pieClick", event.point.name);
              }
            },
            dataLabels: {
              enabled: this.dataLabelsShow,
              formatter() {
                if (this.point.name !== "00") {
                  return `<span style="font-size: 24px;color:#fff">${this.point.name}</span><br/><span style="font-size: 24px;color:#fff">${this.point.y}${that.tooltipDw}</span>`;
                } else {
                  return "";
                }
              }
            }
          }
        },
        colors: this.pieColors,
        series: [
          {
            data: this.seriesData,
            size: this.pieSize,
            startAngle: 30
          }
        ]
      });
    }
  }
};
</script>
<style>
.mycharts {
  width: 100%;
  height: 100%;
}
.highcharts-title {
  display: none;
}
</style>
